<template>
  <el-card>
    <el-button type="primary" @click="handleAdd">新增公告</el-button>
    <el-table stripe :data="announcements" style="margin-top: 20px">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="createTime" label="发布时间">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="发布人"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button text type="primary" @click="handlePreview(scope.row)" size="small"
          >预览
          </el-button>
          <el-button text type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
          <el-button text type="danger" @click="handleDelete(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
        :page-size="queryForm.pageSize"
        :page-sizes="[5, 10]"
        :current-page="queryForm.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
  <el-dialog class="announcement-dialog" v-model="announcementDialog.visible" destroy-on-close @close="fetch">
    <AnnouncementDetails :status="announcementDialog.status"
                         :id="announcementDialog.id"
                         v-model:visible="announcementDialog.visible"></AnnouncementDetails>
  </el-dialog>
</template>

<script>
import {DeleteAnnouncementById, PageAnnouncements} from "@/api/index.js";
import moment from 'moment';
import AnnouncementDetails from "@/components/AnnouncementDetails.vue";
import SummaryDetails from "@/components/SummaryDetails.vue";

export default {
  components: {SummaryDetails, AnnouncementDetails},
  data() {
    return {
      announcements: [], // 公告列表
      announcementDialog: {
        visible: false,
        id: '',
        status: '',
        title: '',
      },
      queryForm: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.fetch();
  },
  methods: {
    handleSizeChange(value) {
      this.queryForm.pageSize = value;
      this.fetch();
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.fetch();
    },
    formatDate(Date) {
      return moment(Date).format('YYYY-MM-DD HH:mm');
    },
    // 获取公告列表
    async fetch() {
      PageAnnouncements(this.queryForm).then(res => {
        this.announcements = res.data.rows;
        this.queryForm.total = +res.data.total
      })
    },
    handlePreview(row) {
      this.announcementDialog = {
        visible: true,
        id: row.id,
        status: 'preview',
      }
    },
    // 新增公告
    handleAdd() {
      this.announcementDialog = {
        visible: true,
        status: 'add',
      }
    },
    // 编辑公告
    handleEdit(row) {
      this.announcementDialog = {
        visible: true,
        id: row.id,
        status: 'edit',
      }
    },
    // 删除公告
    handleDelete(id) {
      DeleteAnnouncementById(id).then(res => {
        this.$message.success('删除成功');
        this.fetch();
      })
    },
  },
};
</script>

<style src="@/assets/style/AnnouncementManagement.less"></style>

